<script>
export default {
    name: "Tag",
    props: {
        tags: {
            type: Array,
            required: true,
        },
    },
    methods: {
        change(e) {
            const tag = e.target.dataset.tag;
            this.$store.commit("blog/updateState", {
                page: 1,
            });
            this.$emit("change", tag);
        },
    },
    render() {
        const tags = this.tags;
        return (
            <div class="tags">
                <p>标签</p>
                <div onClick={this.change}>
                    <a data-tag="">全部</a>
                    {tags.map((item) => {
                        return (
                            <a data-tag={item.tag} key={item.id}>
                                {item.tag}
                            </a>
                        );
                    })}
                </div>
            </div>
        );
    },
};
</script>

<style scoped>
.tags {
    padding-bottom: 15px;
}
p {
    color: gray;
    font-weight: bold;
}
a {
    display: inline-block;
    border: 1px solid #bfbfbf;
    color: #bfbfbf;
    border-radius: 999em;
    padding: 0 10px;
    line-height: 24px;
    font-size: 12px;
    text-decoration: none;
    margin: 0 8px 0 0;
    margin-bottom: 6px;
    cursor: pointer;
}
a:hover {
    color: #0085a1;
    border-color: #0085a1;
}

@media screen and (max-width: 600px) {
    .tags{
        border-top: 1px solid #ececec;
    }
}
</style>
